<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<title>JQuery 学习</title>
	

	<script>
        // 代码有误:
        // 
        /*
        $('#testForm').on('submit', function () {
            alert('submit!');
        });
        */
       
        $(function () {
        	console.log('init A...');
        });

        $(function () {
        	console.log('init B...');
        });

        $(function () {
        	console.log('init C...');
        });

        

        $(document).on('ready', function () {
        	console.log('init D...');
        });



        $(document).on('ready', function () {
        	console.log('init testForm');
            $('#testForm').on('submit', function () {
                alert('submit!');
            });
        });

        $(function () {
        	$('#testMouseMoveDiv').mousemove(function (e) {
        		$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
        	});
        });

        function myFunction(){
        	var x=document.getElementById("fname");
        	x.value=x.value.toUpperCase();
        }


        $(function () {
        	console.log('init test-input');
        	var input = $('#test-input');
        	var input = $('#test-input');
        	input.val('change it!'); 

        	input.change(function () {
        		console.log('changed...');
        	});

            
        	input.on('input propertychange',function(){
        		console.log('changedd...');
        	});
            
        	
        	
        });

    </script>

</head>
<body>

    <div id = "testMouseMoveSpan">testMouseMoveSpan
		
	</div>
    
	<div id = "testMouseMoveDiv">testMouseMoveDiv
		
	</div>

	<a id="test-link" href="#0">点我试试</a>

	<script type="text/javascript">

		function hello() {
			alert('hello!');
		}

		var a = $('#test-link');
		/*
		a.on('click', function () {
			hello();
		});
        */
        a.click(hello);

		setTimeout(function () {
			a.off('click', hello);
		}, 10000);


        //简化写法
        /*
		a.click(function () {
			alert('Hello!');
		});
		*/
	</script>


	<form id="testForm">
		输入你的名字: <input id="test-input" type="text" name="name"></input>
		输入你的昵称: <input type="text" id="fname" onchange="myFunction()">
		<p>当光标离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
	</form>


	<form id="test-form" action="test">
		<legend>请选择想要学习的编程语言：</legend>
		<fieldset>
			<p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>
			<p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
			<p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
			<p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
			<p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
			<p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
			<p><button type="submit">Submit</button></p>
		</fieldset>
	</form>


	<script type="text/javascript">
		var
		form = $('#test-form'),
		langs = form.find('[name=lang]'),
		selectAll = form.find('label.selectAll :checkbox'),
		selectAllLabel = form.find('label.selectAll span.selectAll'),
		deselectAllLabel = form.find('label.selectAll span.deselectAll'),
		invertSelect = form.find('a.invertSelect');


		form.find('*').show().off();
		form.find(':checkbox').prop('checked', false).off();
		deselectAllLabel.hide();

		form.off().submit(function (e) {
			e.preventDefault();
			alert(form.serialize());
		});


		selectAllLabel.click(function(){
			langs.prop('checked',true);
			selectAllLabel.hide();
			deselectAllLabel.show();
		});

		deselectAllLabel.click(function(){
			langs.prop('checked',false);
			deselectAllLabel.hide();
			selectAllLabel.show();
		});

		invertSelect.click(function(){
			langs.map(function(){
				$(this).prop('checked',!$(this).prop('checked'));
			});
		});

		langs.map(function(){
			$(this).change(function(){
				if($('[name=lang]:checked').length==5){
					selectAll.prop('checked',true);
					selectAllLabel.hide();
					deselectAllLabel.show();
				}else{
					selectAll.prop('checked',false);
					selectAllLabel.show();
					deselectAllLabel.hide();
				}
			});
		}); 
	</script>
</body>
</html>
